// 游戏的UI;
/**
 * Created by kenkozheng on 2014/9/15.
 */

// 在GameUI.js中，我们扩展Layer,建立GameUI类
// GameUI中有三个信息：当前关卡、当前分数和剩余步数，
// 这三个信息可能随着游戏过程会不断变化。因此，我们在类定义中显示声明这几个变量，虽然在JS中这样做其实是多余的，但这样做好处是让GameUI类的结构更清晰。

var GameUI = cc.Layer.extend({

    levelText:null,//当前关卡
    scoreText:null,//当前分数
    stepText:null,//剩余步数

    gameLayer:null,

    /**
     *
     * @param gameLayer  // 我们需要解决数据来源，那么我们可以让GameLayer新建GameUI的时候把自己传递进来，后续在GameUI中就可以通过GameLayer获取信息了。
     */
    ctor: function (gameLayer) {
        this._super();
        this.gameLayer = gameLayer;

        this._initInfoPanel();

        this.scheduleUpdate();// 那么我们需要做一个定时器，让信息栏不断刷新。
        // 我们在构造函数中调用 scheduleUpdate实现每帧不断刷新，虽然这样多少有点浪费性能，毕竟游戏不可能每帧都发生信息变化，
        // 但是，这样做能减少一些函数调用，便于代码实现，而且信息栏只有3个 LabelTTF,刷新消耗极小，所以我们采用这简单做法。
    },

    //接下来就要正式新建LabelTTF用于显示信息了。
    // 为了代码的清晰，我们单独建立一个 私有函数_initInfoPanel来完成信息栏的初始化。
    // 三个信息除了数字之外，我们还需要三个标签：“Level”、“Score”和“Step”。
    // 那么，我们一共需要建立6个LabelTTF对象
    _initInfoPanel: function () {
        var size = cc.director.getWinSize();

        // 我们把三个信息显示在屏幕的上方，从左到右分别是Level、Score和Step。
        var levelLabel = new cc.LabelTTF("Level", "arial", 36);
        levelLabel.x = 100;                 // 为了更好 地实现跨平台，我们设置LabelTTF纵向位置不使用绝对坐标，而是使用窗口高度减去固定值的做法。
        levelLabel.y = size.height - 50;    // 这样的好处是，未来我们调整屏幕宽和高，只需要修改html和main.js就可以了，不需要逐个界面去调整。
        levelLabel.setColor(cc.color(0,0,0));// 另外，由于准备的背景图颜色偏亮，所以这里把LabelTTF的 颜色设置为黑色。
        this.addChild(levelLabel);

        var levelText = new cc.LabelTTF("1", "arial", 36);
        levelText.x = 100;
        levelText.y = levelLabel.y - 40;
        levelText.setColor(cc.color(0,0,0));
        this.addChild(levelText);
        this.levelText = levelText;// 最后，为了后续修改信息，我们需要把levelText、scoreText和stepText 记录到 GameUI 类的私有属性中（this.levelText = levelText)。

        var scoreLabel = new cc.LabelTTF("Score", "arial", 36);
        scoreLabel.x = 370;
        scoreLabel.y = levelLabel.y;
        scoreLabel.setColor(cc.color(0,0,0));
        this.addChild(scoreLabel);

        var scoreText = new cc.LabelTTF("1", "arial", 36);
        scoreText.x = 370;
        scoreText.y = levelText.y;
        scoreText.setColor(cc.color(0,0,0));
        this.addChild(scoreText);
        this.scoreText = scoreText;

        var stepLabel = new cc.LabelTTF("Step", "arial", 36);
        stepLabel.x = 620;
        stepLabel.y = levelLabel.y;
        stepLabel.setColor(cc.color(0,0,0));
        this.addChild(stepLabel);

        var stepText = new cc.LabelTTF("1", "arial", 36);
        stepText.x = 620;
        stepText.y = levelText.y;
        stepText.setColor(cc.color(0,0,0));
        this.addChild(stepText);
        this.stepText = stepText;
    },
    /**
     * 戏每一关胜利或失败，我们需要在GameUI上显示胜利或失败的提示。
     * 这里一切从简，胜利和失败都只是弹出一个白底层，中间显示文字。
     * 这里我们使用LayerColor来实现白底层，设置层的宽和高均为500 px。
     */
    showSuccess: function () {
        var bg = new cc.LayerColor(cc.color(255,255,255),500,500);
        this.addChild(bg, 1);
        var size = cc.director.getWinSize();
        bg.x = (size.width - bg.width)/2;
        bg.y = (size.height - bg.height)/2;
        var stepText = new cc.LabelTTF("恭喜，已完成第" + (this.gameLayer.level+1) + "关，\n剩余步数30倍奖励！", "arial", 50);
        stepText.setColor(cc.color(0,0,0));
        stepText.x = 250;
        stepText.y = 250;
        bg.addChild(stepText);
    },

    showFail: function () {
        var bg = new cc.LayerColor(cc.color(255,255,255),500,500);
        this.addChild(bg, 1);
        var size = cc.director.getWinSize();
        bg.x = (size.width - bg.width)/2;
        bg.y = (size.height - bg.height)/2;
        var stepText = new cc.LabelTTF("失败了，\n从头来过吧！", "arial", 56);
        stepText.setColor(cc.color(0,0,0));
        stepText.x = 250;
        stepText.y = 250;
        bg.addChild(stepText);
    },
    /**
     * 在update函数中，我们从GameLayer获取当前关卡、分数、剩余步数等信息。
     */
    update: function () {
        this.levelText.setString("" + (this.gameLayer.level+1));
        this.scoreText.setString("" + this.gameLayer.score);
        this.stepText.setString("" + (this.gameLayer.limitStep - this.gameLayer.steps));
    }

});